<template>
  <view>
    <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
      <view class="" v-if="recordList.length > 0">
        <uni-card v-for="(item,index) in recordList" :key="index">
          <view class="record">
            <view class="record-address">
              {{ item.elevatorName }}
            </view>
            <view class="sbwe">
              <view class="">
                <view class="record-state">
                  <DictTag :dict-value="getDict(DictEnum.IOT_REPORT)" :value="item.tiringType"></DictTag>
                </view>
                <view class="information">
                  <!-- left -->
                  <view class="information-left">
                    <view class="record-time">
                      故障时长:
                      <text>{{ item.tiringDuration }}</text>
                    </view>

                  </view>
                </view>
              </view>
              <view class="startJ" v-if="item.tiringState == 0" @click="goRescueDetails(item.tiringId)">开始救援</view>
              <view class="startJ" v-if="item.tiringState == 1" @click="goRescueDetails(item.tiringId)">接受任务</view>
              <view class="startJ" v-if="item.tiringState == 2" @click="goRescueDetails(item.tiringId)">接受任务</view>
              <view class="startJ" v-if="item.tiringState == 3" @click="goRescueDetails(item.tiringId)">到达现场</view>
              <view class="startJ" v-if="item.tiringState == 4" @click="goRescueDetails(item.tiringId)">完成救援</view>
              <!-- 
              <view class="startJ" v-else-if="item.tiringState == 2" @click="navRouter(`/pages/tabbar/polling/Sleepy/sleepyDetai?tiringId=${item.tiringId}`)">接受任务</view>
              <view class="startJ" v-else-if="item.tiringState == 3" @click="navRouter(`/pages/tabbar/polling/Sleepy/sleepyDetai?tiringId=${item.tiringId}`)">到达现场</view>
              <view class="startJ" v-else-if="item.tiringState == 4" @click="navRouter(`/pages/tabbar/polling/Sleepy/sleepyDetai?tiringId=${item.tiringId}`)">完成救援</view> -->
            </view>

          </view>
        </uni-card>
      </view>
    </tm-scrolly>
    <view class="" v-if="recordList.length === 0">
      <nullPage></nullPage>
    </view>
  </view>
</template>

<script>
import nullPage from '@/components/null.vue'
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";
import {listElevatorTiring, starRescue} from "@/api/iot/elevatorTiring";
import {getDict} from "@/utils/dict";
import {DictEnum} from "@/enums/dictEnum";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  components: {
    nullPage
  },
  data() {
    return {
      // 内容
      recordList: [],
      pageNum: 1,
      getListFlag: true,
      longitude: "",
      latitude: "",
      listHeight: 1000
    }
  },
  onLoad(e) {
    /**
     * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
     * 返回需要转换为rpx
     */
    const windowInfo = useWindowInfo();
    /**
     * h5获取的height是所有元素的height
     * 微信获取的height是不包标题栏的
     * 但是h5的标题高度会在top属性显示  微信为0
     * 使用height - top就是实际页面高度 不用判断环境了
     */
    const windowHeight = windowInfo.height;
    const titleHeight = windowInfo.top;
    // 头部区域高度
    const headHeight = 40;
    // 底部区域高度
    const bottomHeight = 30;
    const bottomSafe = windowInfo.bottomSafe;
    this.listHeight = uni.$tm.u.torpx(
        windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
    );

    this.getleavtList();
    let that = this;
    uni.getLocation({
      type: 'gcj02',
      success: function (da) {
        that.longitude = da.longitude
        that.latitude = da.latitude
      },
    });
  },
  methods: {
    getDict,
    async getleavtList(flag) {
      if (flag) {
        this.pageNum = 1;
        this.recordList = [];
        this.getListFlag = true;
      }
      const res = await listElevatorTiring({
        pageNum: this.pageNum,
        pageSize: 10,
      });
      if (res.rows.length < 10) {
        this.getListFlag = false;
      }
      this.recordList.push(...res.rows)
    },
    // 困人记录跳转救援详情
    async goRescueDetails(e) {
      const res = await starRescue({
        tiringId: e,
        longitudeStart: this.longitude,
        latitudeStart: this.latitude
      });
      uni.navigateTo({url: `/pages/tabbar/polling/Sleepy/sleepyDetai?tiringId=` + e});
    },
    onScrollToBottom(e) {
      if (this.getListFlag) {
        this.pageNum = this.pageNum + 1;
        this.getleavtList();
      }
    }
  },
  onPullDownRefresh() {
    this.recordList = [];
    this.pageNum = 1;
    this.getRecordList();
    uni.stopPullDownRefresh();
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

page {
  width: 750rpx;
  background: #EFF2F5;
  overflow: hidden;
}

view {
  font-size: 28rpx;
  line-height: 1.8;

}

.uni-card {
  width: 670rpx;
  /* height: 280rpx; */
  border: none;
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  line-height: 280rpx;
  text-align: left;
}

.uni-icons {
  color: #3AC211;
}

.record {
  font-family: PingFang SC;
  font-weight: 400;

}

.record-address {
  font-size: 30rpx;
  color: #34363D;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.record-address text {
  color: #017EFE;
}

.record-state {
  font-size: 30rpx;
  color: #017EFE;
}

/* 左右 信息*/
.information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.record-time {
  font-size: 24rpx;
  color: #989BA6;
}

.record-time text {
  margin-left: 15rpx;
  color: #34363D;
  word-spacing: 15rpx;
  letter-spacing: 1rpx;
}

.sbwe {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .startJ {
    width: 150rpx;
    height: 56rpx;
    background: #3AC211;
    box-shadow: 0px 5rpx 10rpx 0px rgba(58, 194, 17, 0.2);
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 56rpx;

  }
}
</style>
